<template>
	<view class="page">

		<view class="banner">
			<uni-swiper-dot :info="bannerImage" :current="current" :mode="mode" :dots-styles="dotsStyles" field="content">
				<swiper class="swiper-box" @change="change">
					<swiper-item v-for="(item ,index) in bannerImage" :key="index">
						<view :class="item.colorClass" class="swiper-item">
							<image :src="item.url" mode="aspectFill" />
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="two-button-list">
			<view class="button-item" v-for="(button,index) in twoButtons" :key="index">
				<view class="button-box" @tap="navigateTo(button.url)">
					<view class="button-title-box">
						<text class="title">{{ button.title }}</text>
						<text class="subTitle">{{ button.subTitle }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="head-empty2"></view>
		<view class="icon-list">
			<view class="card-item-content uni-flex uni-row">
				<view v-for="( item, index ) in iconList" :key="index" class="item">
					<view class="icon-wrap" @tap="navigateTo(item.args)">
						<image :src="item.icon" mode=""></image>
					</view>
					<view class="icon-title" @tap="navigateTo(item.args)">{{ item.title }}</view>
				</view>
			</view>
		</view>
		<view>
			<image class="bg" src="http://yao.hayzon.com/static/replace0823/34.png"></image>
		</view>
		<view>
			<image class="bg" src="http://yao.hayzon.com/static/index/xianshi.png"></image>
		</view>
		<view>
			<image style="width: 750upx;height:800upx;" src="http://yao.hayzon.com/static/index/pinpai.png"></image>
		</view>
		<view>
			<image style="width: 750upx;height:800upx;" src="http://yao.hayzon.com/static/index/haiwai.png"></image>
		</view>
		<view v-for="(item,index) in haohuoList" :key="index" style="text-align: center;">
			<image style="width: 750upx;padding-left:10upx;" :src="item.url"></image>
		</view>
		<view>
			<image style="width: 750upx;height:50upx;margin: 20upx;" src="http://yao.hayzon.com/static/index/shop.png"></image>
		</view>
		<view v-for="(shop, index) in shopList" :key="index">
			<product-list :data="shop"></product-list>
			<br />
		</view>
	</view>
</template>

<script>
	import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue'
	import productList from "@/pages/yaodao/components/productList.vue"
	export default {
		components: {
			uniSwiperDot,
			productList
		},
		data() {
			return {
				bannerImage: [{
						colorClass: 'uni-bg-red',
						url: 'http://yao.hayzon.com/static/replace0823/01.png',
						content: '内容 A'
					},
					{
						colorClass: 'uni-bg-green',
						url: 'http://yao.hayzon.com/static/replace0823/02.png',
						content: '内容 B'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'http://yao.hayzon.com/static/replace0823/03.png',
						content: '内容 C'
					}
				],
				dotsStyles: {
					backgroundColor: 'rgba(255, 90, 95,0.3)',
					border: '1px rgba(255, 90, 95,0.3) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
					selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
				},
				modeIndex: -1,
				styleIndex: -1,
				current: 0,
				mode: 'default',
				bannerImageUrl: "http://yao.hayzon.com/static/index/banner.png",
				twoButtons: [{
					icon: "http://yao.hayzon.com/static/index/two_button_0.png",
					title: "智慧问诊",
					subTitle: "简单快捷，安全可靠",
					badgeText: "免费卷",
					url: "model"
				}, {
					icon: "http://yao.hayzon.com/static/index/two_button_1.png",
					title: "医馆推荐",
					subTitle: "平台推荐，实例验证",
					badgeText: "",
					url: "diseases"
				}],
				iconList: require("../../data/index/iconList.json"),
				haohuoList: [{
						url: 'http://yao.hayzon.com/static/index/haohuo-1.png',
					},
					{
						url: 'http://yao.hayzon.com/static/index/haohuo-2.png',
					},
					{
						url: 'http://yao.hayzon.com/static/index/haohuo-3.png',
					},
					{
						url: 'http://yao.hayzon.com/static/index/haohuo-4.png',
					},
				],
				//附近药店
				shopList: require('../../data/stores.json'),
			}
		},
		onReady() {

		},
		methods: {
			navigateTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			change(e) {
				this.current = e.detail.current
			}
		}
	}
</script>
<style lang="scss" scoped>
	.bg {
		width: 100%;
		height: 350upx;
		// height: 3000rpx;
	}

	.uni-btn-icon {
		margin-top: 10px;
	}

	.link-doctor {
		text-align: center;
		line-height: 100upx;
		color: #414141;
		borderRadius: 20px;
	}

	.link-doctor image {
		borderRadius: 20px;
	}

	.my-doctor {
		height: 160upx;
		margin: 18upx 30upx;

	}

	.my-doctor image {
		height: 100%;
		width: 100%;
	}

	.link-icon {
		width: 40upx;
		height: 40upx;
	}

	.link-icon1 {
		width: 40upx;
		height: 40upx;
		margin-top: 8upx;
	}

	.link-list {
		border-bottom: 1px solid #e6e7e2;
		height: 50upx;
		margin: 10upx 30upx;
		display: flex;
		padding-bottom: 10upx;
	}

	.link-list text {
		color: #999999;
		font-size: 0.85em;
		margin-left: 5upx;
	}

	.link-list image {
		vertical-align: middle;
	}

	.link-item {
		margin-right: 15upx;
		width: 30%;
		border: 1px solid transparent;
	}

	.icon-title {
		color: #272727;
		width: 100%;
		text-align: center;
		line-height: 30upx;
	}

	.item {
		margin: 20upx;
		margin-top: 20upx;
		width: 18%;
	}

	.icon-wrap {
		position: relative;
		text-align: center;
		align-content: center;

		image {
			width: 106upx;
			height: 106upx;
			vertical-align: top;
		}

		.badge {
			font-size: 20upx;
			width: 30upx;
			height: 30upx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			background-color: #dd524d;
			border-radius: 50%;
			position: absolute;
			top: 0;
			right: 0;
		}
	}

	.card-item-content {
		padding: 15upx;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.icon-list {}

	.page {
		background-repeat: no-repeat;
		background-size: cover;

		// height: 100%;
		background-color: #fff;
	}

	.head-empty {
		height: 80upx;
	}

	.head-empty2 {
		height: 30upx;
	}

	.banner {
		margin-top: 10upx;

	}

	.two-button-list,
	.button-box {
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		flex-direction: row;
		height: 180upx;

	}

	.two-button-list {
		margin-right: 50upx;
		margin-top: 50upx;
		background: url(http://yao.hayzon.com/static/replace0823/askdoctor.png) 100% center/100% no-repeat;
	}

	.button-item {
		display: flex;
		flex-direction: column;
		margin-left: 40upx;
		flex: 1;
	}

	.button-icon-box,
	.button-title-box {
		display: flex;
		flex-direction: column;
		margin-left: 20upx;
		padding-top: 50upx;
		box-sizing: border-box;
	}

	.button-icon {
		width: 50px;
		height: 50px;
	}

	.button-title-box .title {
		font-size: 1.2em;
		color: #353535;
		margin-left: 5upx;
		font-weight: bold;
		line-height: 53upx;
	}

	.button-title-box .subTitle {
		margin-left: 5upx;
		font-size: 0.8em;
		color: #8d8d8d;
	}

	.example {
		padding: 0 30upx 30upx
	}

	.example-title {
		font-size: 32upx;
		line-height: 32upx;
		color: #777;
		margin: 40upx 25upx;
		position: relative
	}

	.example .example-title {
		margin: 40upx 0
	}

	.example-body {
		padding: 0 40upx
	}

	.swiper-box {
		height: 200upx;
	}

	.swiper-item {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		background: #eee;
		color: #fff;
	}

	.swiper-item image {
		width: 100%;
		height: 100%;
	}

	.uni-bg-red {
		background: #ff5a5f;
	}

	.uni-bg-green {
		background: #09bb07;
	}

	.uni-bg-blue {
		background: #007aff;
	}

	.uni-swiper__box {
		margin-top: 30upx;
	}

	.uni-swiper__header {
		padding: 0 30upx;
		font-size: 32upx;
		color: #333;
	}

	.uni-swiper__info {
		display: flex;
		padding: 0 15upx;
	}

	.uni-swiper__info-item {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 15upx;
		height: 60upx;
		width: 100%;
		font-size: 28upx;
		color: #333;
		border: 1px #eee solid;
		border-radius: 10upx;
	}

	.uni-swiper__info-dots {
		width: 16upx;
		height: 16upx;
		border-radius: 50%;
		background: #333333;
		margin-left: 10upx;
		box-sizing: border-box;
	}

	.uni-swiper__info-dots:first-child {
		margin: 0;
	}

	.active {
		border: 1px #000 solid;
	}

	slider {
		width: 100%;
	}
</style>
